<template>
   <m-layout >
     <mt-header slot="header" :title="headerText">
       <m-header-back slot="left"/>
     </mt-header>
     <div slot="body">
       <m-section class="ability-change">
         <div class="ability-change-echarts">
           <div ref="barEcharts"></div>
         </div>
         <m-flexbox class="ability-change-pages small" justify="space-between">
           <div :class="{weak: !chartLoadParam.hasPre}"  @click="chartLoadParam.hasPre && handlePrePage">上一页</div>
           <div :class="{weak: !chartLoadParam.hasNext}" @click="chartLoadParam.hasNext && handleNextPage">下一页</div>
         </m-flexbox>
       </m-section>
       <m-section class="ability-change">
         <m-flexbox class="ability-change-text weak small" justify="space-between">
            <div>测试日期</div>
            <div>测试方式&测试结果</div>
            <div>能力值变化</div>
         </m-flexbox>
         <m-flexbox
           class="ability-change-text small"
           justify="space-between"
           v-if="abilityScoreList && abilityScoreList.length"
           v-for="(item, index) in abilityScoreList"
           :key="index">
           <div>{{new Date(item.testDate).format()}}</div>
           <div class="ability-change-score">
             <div>{{item.testMethodName}}</div>
             <span v-if="item.testScoreType===1">{{item.testResult}}{{item.testResultDesc}}（{{item.testScoreLevel}}）</span>
             <span v-else>{{item.testScoreLevel}}（{{item.testScoreLevel}}）</span>
           </div>
           <div class="blue" v-if="item.abilityScore!==0">{{item.abilityScore>0?'+':''}}{{item.abilityScore}}分</div>
           <div class="weak" v-else>无变化</div>
         </m-flexbox>
       </m-section>
     </div>
   </m-layout>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      storeList: state => state.smartCourse.abilityScoreList,
      abilityScoreChart: state => state.smartCourse.abilityScoreChart
    })
  },
  data () {
    return {
      echarts: {},
      headerText: `${this.$route.query.testModeName}能力值变化`,
      abilityScoreList: [],
      // abilityScoreChart: [],
      chartLoadParam: {
        page: 1,
        hasPre: false,
        hasNext: false
      },
      listLoadParam: {
        page: 1
      }
    }
  },
  mounted () {
    this.$$query = this.$route.query
    this.studentTestAbilityScoreChartByPage().then(() => {
      this.chartLoadParam.hasPre = this.abilityScoreChart.hasNextPage
      require.ensure([], (require) => {
        this.$$echarts = require('echarts/lib/echarts')
        require('echarts/lib/chart/bar')
        this.displayEcharts()
      })
    })
    this.studentTestAbilityScoreListByPage()
  },
  methods: {
    handlePrePage () {
      this.chartLoadParam.page++
      this.studentTestAbilityScoreChartByPage().then((res) => {
        this.chartLoadParam.hasNext = true
        this.chartLoadParam.hasPre = res.data.hasNextPage
        this.displayEcharts()
        // 切换柱状图“上一页”，下面的成绩也要重新请求
        this.listLoadParam.page = this.chartLoadParam.page
        this.studentTestAbilityScoreListByPage()
      })
    },
    handleNextPage () {
      this.chartLoadParam.page--
      if (this.chartLoadParam.page === 1) { // 到了最新的一页
        this.chartLoadParam.hasNext = false
        this.chartLoadParam.hasPre = true
      }
      this.studentTestAbilityScoreChartByPage().then(() => {
        this.displayEcharts()
        // 切换柱状图“下一页”，下面的成绩也要重新请求
        this.listLoadParam.page = this.chartLoadParam.page
        this.studentTestAbilityScoreListByPage()
      })
    },
    displayEcharts () {
      const scoreList = this.abilityScoreChart.list.reverse()
      const data = []
      const date = []
      scoreList.forEach(item => {
        data.push(item['abilityCummulation'])
        date.push(this.getMonthAndDay(item['testDate']))
      })
      this.$nextTick(this.showECharts({data, date}))
    },
    showECharts (obj) {
      let barDom = this.$refs.barEcharts
      barDom.style.height = '246px'
      this.echarts = this.$$echarts.init(barDom)
      this.echarts.setOption(this.abilityChangeOption(obj))
    },
    studentTestAbilityScoreChartByPage () {
      return this.$store.dispatch('smartCourse/studentTestAbilityScoreChartByPage', {
        studentId: this.$$query.studentId,
        testModelId: this.$$query.testModeId,
        pageNo: this.chartLoadParam.page,
        rows: 7
      })
    },
    studentTestAbilityScoreListByPage () {
      this.$store.dispatch('smartCourse/studentTestAbilityScoreListByPage', {
        studentId: this.$$query.studentId,
        testModelId: this.$$query.testModeId,
        pageNo: this.listLoadParam.page,
        rows: 7
      }).then(() => {
        this.listLoadParam.page++
        this.abilityScoreList = [...this.abilityScoreList, ...this.storeList.list]
      })
    },
    getMonthAndDay (dateStr) {
      const date = new Date(dateStr)
      return date.getMonth() + 1 + '-' + date.getDate()
    },
    abilityChangeOption (params) {
      return {
        xAxis: { // X轴
          axisTick: {
            show: false // 刻度隐藏
          },
          axisLine: { // 线
            lineStyle: {
              color: '#e5e5e5'
            }
          },
          axisLabel: {
            color: '#999999',
            fontSize: 12,
            interval: 0
          },
          splitNumber: 7,
          // nameTextStyle: { //文字
          //   color: '#999999',
          //   fontSize: 12
          // },
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          data: params['date']
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisLabel: {
            color: '#999999',
            fontSize: 12
          },
          axisTick: {
            show: false
          },
          // min: 0,
          splitNumber: 2, // 间隔数量
          splitLine: {
            lineStyle: {
              color: ['#e5e5e5'],
              type: 'dotted'
            }
          }
        },
        series: [{
          // data: [120, 200, 150, 80, 70, 110, 130],
          data: params['data'],
          type: 'bar',
          barWidth: 20,
          itemStyle: {
            normal: {
              color: '#d14a59',
              fontSize: 12,
              label: {
                show: true, // 顶部数据显示
                position: 'top',
                color: '#333333'
              }
            }
          }
        }]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .ability-change{
    &-pages{
      position: relative;
      top: -0.3rem;
      padding: 0 2rem;
      div{
        padding: .2rem;
      }
    }
    &-text{
      padding: 0 0.4rem;
      height: 1rem;
    }
    &-score{
      width: 50%;
    }
  }
</style>
